﻿@using DevExpress.Blazor
@inherits DemoWithResizableComponent

<div class="demo-description">
    <h2><DemoNavLink Link="FormLayout#DataBinding" />Bind to Data</h2>
    <p>
        You can use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout#bind-to-data">Form Layout</a> component to display and edit data from an external source.
        In this demo, such data source is assigned to the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout.Data">Data</a> property.
        Form Layout items must be declared and bound to data source fields using the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayoutItem.Field">Field</a> property.
        Each item automatically displays a DevExpress data editor suitable for the target data type.
    </p>
    <p>
        You can override the default behavior and assign a custom editor to a layout item. To see an example, review the code for the Position item below.
    </p>
</div>

<div class="card demo-card-wide demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode">
            <TitleTemplate>
                DataObject = { @nameof(FormDataItem.Name)=<b>@editFormData.Name</b>, @nameof(FormDataItem.BirthDate)=<b>@editFormData.BirthDate</b>, @nameof(FormDataItem.YearsWorked)=<b>@editFormData.YearsWorked</b>, @nameof(FormDataItem.Position)=<b>@editFormData.Position</b>, @nameof(FormDataItem.OnVacation)=<b>@editFormData.OnVacation</b> }
            </TitleTemplate>
        </DemoToolbar>
    </div>
    <div class="card-body card-body-fl">
        <DxFormLayout Data="@editFormData"
                      ItemSizeMode="SizeMode"
                      ItemUpdating="@((pair) => OnItemUpdating(pair.Key, pair.Value))"
                      @key="@ThemeName">
            <DxFormLayoutItem Field="@nameof(FormDataItem.Name)" Caption="Contact Name:" ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.BirthDate)" Caption="Birth Date:" ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.YearsWorked)" Caption="Years Worked:" ColSpanMd="6" />
            <DxFormLayoutItem Field="@nameof(FormDataItem.Position)" Caption="Position:" ColSpanMd="6">
                <Template>
                    <DxComboBox Data="@(new List<string>() { "Sales Representative", "Designer" })"
                                Value="@(((string)((ValueEditContext)context).Value))"
                                ValueChanged="@((string value) => ((ValueEditContext)context).OnChanged(value))"></DxComboBox>
                </Template>
            </DxFormLayoutItem>
            <DxFormLayoutItem Field="@nameof(FormDataItem.OnVacation)" Caption="On Vacation:" ColSpanMd="6" />
        </DxFormLayout>

    </div>
</div>

<CodeSnippet_FormLayout_Default_DataBinding />

@code {
    [CascadingParameter(Name = "ThemeName")] string ThemeName { get; set; }

    FormDataItem editFormData = new FormDataItem()
    {
        Name = "Nancy Davolio",
        BirthDate = DateTime.Now.AddYears(-30),
        YearsWorked = 3,
        Position = "Sales Representative"
    };

    void OnItemUpdating(string fieldName, object newValue)
    {
        if (fieldName == nameof(FormDataItem.Name))
        {
            editFormData.Name = newValue.ToString();
        }
        else if (fieldName == nameof(FormDataItem.BirthDate))
        {
            editFormData.BirthDate = (DateTime)newValue;
        }
        else if (fieldName == nameof(FormDataItem.YearsWorked))
        {
            editFormData.YearsWorked = (int)newValue;
        }
        else if (fieldName == nameof(FormDataItem.Position))
        {
            editFormData.Position = newValue.ToString();
        }
        else if (fieldName == nameof(FormDataItem.OnVacation))
        {
            editFormData.OnVacation = (bool)newValue;
        }
    }
}
